<template>
  <el-dialog v-model="centerDialogVisible" :title="title" :width="width" center>
    <span>{{ text }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">{{cancel}}</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">{{confirm}}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import {ref, watch} from 'vue'

export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "提示信息"
    },
    text: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "30%"
    },
    cancel: {
      type: String,
      default: "取消"
    },
    confirm: {
      type: String,
      default: "确定"
    },
  },
  setup(props: any, ctx: any) {
    console.log(props.isShow)
    const centerDialogVisible = ref(props.isShow)

    watch(props, ((value, oldValue) => {
      centerDialogVisible.value = value.isShow
      console.log(value.isShow, oldValue.isShow)
    }))

    return {
      centerDialogVisible
    }
  },
}
</script>
